<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>聊天室 - 文档管理系统</title>
    <link rel="stylesheet" href="/css/style.css">
    <style>
        body {
            background: linear-gradient(135deg, #1a1f25, #242830);
            color: #e4e6eb;
        }
        
        .main-header {
            background-color: rgba(26, 31, 37, 0.9);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .main-footer {
            background-color: rgba(26, 31, 37, 0.9);
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.25);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .chat-room-container {
            display: flex;
            height: calc(100vh - 150px);
            margin: 20px 0;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: none;
            background-color: rgba(0, 0, 0, 0);
            border: 1px solid rgba(255, 255, 255, 0.15);
        }
        
        .users-panel {
            width: 280px;
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(0, 0, 0, 0);
            color: white;
            display: flex;
            flex-direction: column;
        }
        
        .users-header {
            padding: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            background-color: rgba(0, 0, 0, 0);
        }
        
        .users-header h3 {
            margin: 0;
            font-size: 18px;
            font-weight: bold;
            color: #4299e1;
            letter-spacing: 0.5px;
        }
        
        .users-list {
            flex: 1;
            overflow-y: auto;
            padding: 15px;
        }
        
        .users-list::-webkit-scrollbar {
            width: 6px;
        }
        
        .users-list::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
        }
        
        .users-list::-webkit-scrollbar-thumb {
            background: rgba(66, 153, 225, 0.5);
            border-radius: 3px;
        }
        
        .user-item {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            border-radius: 10px;
            margin-bottom: 8px;
            cursor: pointer;
            transition: all 0.2s;
            background-color: rgba(0, 0, 0, 0);
        }
        
        .user-item:hover {
            background-color: rgba(66, 153, 225, 0.1);
            transform: translateY(-2px);
        }
        
        .user-item.active {
            background-color: rgba(66, 153, 225, 0.1);
            border-left: none;
        }
        
        .user-avatar {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            margin-right: 12px;
            object-fit: cover;
            border: 2px solid #4299e1;
            box-shadow: 0 0 10px rgba(66, 153, 225, 0.5);
        }
        
        .user-info {
            flex: 1;
        }
        
        .user-name {
            font-weight: 600;
            color: white;
            font-size: 15px;
            margin: 0;
        }
        
        .user-status {
            font-size: 13px;
            color: #a0aec0;
            margin: 4px 0 0;
        }
        
        .user-status.online {
            color: #48bb78;
            display: flex;
            align-items: center;
        }
        
        .user-status.online::before {
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: #48bb78;
            border-radius: 50%;
            margin-right: 5px;
            box-shadow: 0 0 5px #48bb78;
        }
        
        .chat-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            background-color: rgba(0, 0, 0, 0);
        }
        
        .chat-header {
            padding: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            background-color: rgba(0, 0, 0, 0);
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .chat-title {
            margin: 0;
            font-size: 18px;
            font-weight: bold;
            color: #4299e1;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
        }
        
        .chat-title::before {
            content: '#';
            color: #4299e1;
            margin-right: 5px;
            font-size: 22px;
            font-weight: 400;
        }
        
        #connectionStatus {
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 14px;
            background-color: rgba(0, 0, 0, 0);
        }
        
        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            background-color: rgba(0, 0, 0, 0);
            background-image: none;
        }
        
        .chat-messages::-webkit-scrollbar {
            width: 6px;
        }
        
        .chat-messages::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.1);
        }
        
        .chat-messages::-webkit-scrollbar-thumb {
            background: rgba(66, 153, 225, 0.5);
            border-radius: 3px;
        }
        
        .message {
            margin-bottom: 22px;
            display: flex;
            align-items: flex-start;
            max-width: 80%;
            animation: message-pop 0.3s ease-out;
        }
        
        @keyframes message-pop {
            0% { transform: scale(0.9); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }
        
        .message.own {
            margin-left: auto;
            flex-direction: row-reverse;
        }
        
        .message-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 12px;
            margin-left: 12px;
            object-fit: cover;
            border: 2px solid #4a5568;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        }
        
        .message.own .message-avatar {
            border-color: #4299e1;
        }
        
        .message-content {
            background-color: rgba(45, 55, 72, 0.4);
            padding: 12px 16px;
            border-radius: 18px;
            position: relative;
            box-shadow: none;
            border: none;
        }
        
        .message-content::before {
            content: '';
            position: absolute;
            top: 15px;
            left: -8px;
            width: 15px;
            height: 15px;
            background-color: rgba(45, 55, 72, 0.4);
            transform: rotate(45deg);
            border: none;
        }
        
        .message.own .message-content {
            background-color: rgba(49, 130, 206, 0.4);
            border: none;
        }
        
        .message.own .message-content::before {
            left: auto;
            right: -8px;
            background-color: rgba(49, 130, 206, 0.4);
            border: none;
        }
        
        .message-text {
            margin: 0;
            line-height: 1.5;
            font-size: 15px;
            color: #e2e8f0;
        }
        
        .message.own .message-text {
            color: white;
        }
        
        .message-time {
            font-size: 12px;
            color: #a0aec0;
            margin-top: 6px;
            text-align: right;
        }
        
        .message.own .message-time {
            color: rgba(255, 255, 255, 0.7);
        }
        
        .system-message {
            text-align: center;
            margin: 15px 0;
            opacity: 0.7;
            animation: fade-in 0.5s ease-out;
        }
        
        @keyframes fade-in {
            0% { opacity: 0; }
            100% { opacity: 0.7; }
        }
        
        .system-message p {
            display: inline-block;
            background-color: rgba(255, 255, 255, 0.05);
            color: #a0aec0;
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 13px;
            margin: 0;
        }
        
        .chat-input {
            padding: 18px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            background-color: rgba(0, 0, 0, 0);
        }
        
        .chat-input input {
            flex: 1;
            background-color: rgba(63, 70, 86, 0.3);
            border: none;
            border-radius: 24px;
            padding: 12px 20px;
            outline: none;
            font-size: 15px;
            color: #e4e6eb;
            box-shadow: none;
        }
        
        .chat-input input::placeholder {
            color: #a0aec0;
        }
        
        .chat-input input:focus {
            border-color: #4299e1;
            box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.25), inset 0 1px 5px rgba(0, 0, 0, 0.1);
        }
        
        .chat-input button {
            background: linear-gradient(to right, #4299e1, #3182ce);
            color: white;
            border: none;
            border-radius: 24px;
            padding: 12px 24px;
            margin-left: 12px;
            cursor: pointer;
            font-size: 15px;
            font-weight: 600;
            transition: all 0.2s;
            box-shadow: 0 2px 10px rgba(66, 153, 225, 0.4);
        }
        
        .chat-input button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(66, 153, 225, 0.5);
        }
        
        .chat-input button:disabled {
            background: #4a5568;
            opacity: 0.7;
            cursor: not-allowed;
            box-shadow: none;
            transform: none;
        }
        
        .emoji-button {
            background-color: rgba(63, 70, 86, 0.3);
            border: none;
            border-radius: 50%;
            width: 45px;
            height: 45px;
            font-size: 20px;
            margin-right: 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            box-shadow: none;
        }
        
        .emoji-button:hover {
            background-color: #4a5568;
            transform: scale(1.05);
        }
        
        /* 表情选择器样式 */
        .emoji-picker {
            position: absolute;
            bottom: 80px;
            left: 18px;
            width: 300px;
            background-color: rgba(42, 47, 58, 0.9);
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
            z-index: 1000;
            display: none;
            animation: fade-in 0.2s ease-out;
            border: 1px solid rgba(255, 255, 255, 0.1);
            max-height: 300px;
            overflow-y: auto;
        }
        
        .emoji-picker-header {
            padding: 12px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .emoji-picker-header span {
            font-size: 14px;
            font-weight: 600;
            color: #e2e8f0;
        }
        
        .emoji-close-button {
            background: none;
            border: none;
            color: #a0aec0;
            font-size: 20px;
            cursor: pointer;
            outline: none;
            padding: 0;
        }
        
        .emoji-close-button:hover {
            color: #e2e8f0;
        }
        
        .emoji-container {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 8px;
            padding: 12px;
        }
        
        .emoji-item {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            height: 40px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            background-color: rgba(63, 70, 86, 0.3);
        }
        
        .emoji-item:hover {
            transform: scale(1.1);
            background-color: rgba(66, 153, 225, 0.2);
        }
        
        /* 表情选择器响应式设计 */
        @media (max-width: 768px) {
            .emoji-picker {
                width: calc(100% - 36px);
                left: 18px;
                max-height: 250px;
            }
            
            .emoji-container {
                grid-template-columns: repeat(5, 1fr);
            }
            
            .emoji-item {
                font-size: 22px;
                height: 38px;
            }
        }
        
        @media (max-width: 480px) {
            .emoji-picker {
                width: calc(100% - 24px);
                left: 12px;
                max-height: 200px;
            }
            
            .emoji-container {
                grid-template-columns: repeat(4, 1fr);
                gap: 6px;
                padding: 10px;
            }
            
            .emoji-item {
                font-size: 20px;
                height: 36px;
            }
        }
        
        .login-reminder {
            text-align: center;
            padding: 30px;
            background-color: rgba(42, 47, 58, 0.3);
            border-radius: 15px;
            box-shadow: none;
            margin: 50px auto;
            max-width: 500px;
            border: none;
        }
        
        .login-reminder h2 {
            margin-top: 0;
            color: #e4e6eb;
            font-size: 24px;
            margin-bottom: 15px;
        }
        
        .login-reminder p {
            margin-bottom: 25px;
            color: #a0aec0;
            font-size: 16px;
        }
        
        .login-reminder .btn {
            display: inline-block;
            padding: 12px 24px;
            background: linear-gradient(to right, #4299e1, #3182ce);
            color: white;
            text-decoration: none;
            border-radius: 24px;
            font-weight: 600;
            font-size: 16px;
            transition: all 0.2s;
            margin: 0 8px;
            box-shadow: 0 4px 10px rgba(66, 153, 225, 0.4);
        }
        
        .login-reminder .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(66, 153, 225, 0.5);
        }
        
        .login-reminder .btn-secondary {
            background: linear-gradient(to right, #4a5568, #2d3748);
            box-shadow: 0 4px 10px rgba(74, 85, 104, 0.4);
        }
        
        .login-reminder .btn-secondary:hover {
            box-shadow: 0 6px 15px rgba(74, 85, 104, 0.5);
        }
        
        .container {
            max-width: 1200px;
        }
        
        .main-header nav ul li a {
            color: #e4e6eb;
            background-color: transparent;
            border-radius: 20px;
            padding: 8px 16px;
            transition: all 0.2s;
        }
        
        .main-header nav ul li a:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        .main-header nav ul li a.active {
            background-color: rgba(66, 153, 225, 0.3);
            color: #4299e1;
        }
        
        /* 响应式设计 - 移动设备适配 */
        @media (max-width: 768px) {
            .chat-room-container {
                flex-direction: column;
                height: calc(100vh - 120px);
            }
            
            .users-panel {
                width: 100%;
                height: auto;
                border-right: none;
                border-bottom: none;
                order: 2;
                max-height: 30vh;
                transition: max-height 0.3s ease;
            }
            
            .users-panel.collapsed {
                max-height: 60px;
                overflow: hidden;
            }
            
            .users-header {
                padding: 10px 15px;
                cursor: pointer;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            
            .users-header:after {
                content: '▼';
                font-size: 12px;
                color: #4299e1;
                transition: transform 0.3s ease;
            }
            
            .users-panel.collapsed .users-header:after {
                transform: rotate(180deg);
            }
            
            .chat-panel {
                order: 1;
                height: 70vh;
            }
            
            .chat-header {
                padding: 10px 15px;
            }
            
            .chat-title {
                font-size: 16px;
            }
            
            .chat-messages {
                padding: 15px;
            }
            
            .message {
                max-width: 90%;
                margin-bottom: 16px;
            }
            
            .message-avatar {
                width: 36px;
                height: 36px;
                margin-right: 8px;
                margin-left: 8px;
            }
            
            .message-content {
                padding: 10px 12px;
            }
            
            .message-text {
                font-size: 14px;
            }
            
            .chat-input {
                padding: 12px;
            }
            
            .emoji-button {
                width: 40px;
                height: 40px;
                font-size: 18px;
                margin-right: 8px;
            }
            
            .chat-input input {
                padding: 10px 15px;
                font-size: 14px;
            }
            
            .chat-input button {
                padding: 10px 16px;
                font-size: 14px;
            }
            
            .container {
                padding-left: 15px;
                padding-right: 15px;
            }
            
            .main-header h1 {
                font-size: 20px;
            }
            
            .main-header nav {
                overflow-x: auto;
                white-space: nowrap;
                scrollbar-width: none;
                -ms-overflow-style: none;
                padding-bottom: 5px;
            }
            
            .main-header nav::-webkit-scrollbar {
                display: none;
            }
            
            .main-header nav ul {
                display: inline-flex;
                padding-left: 0;
            }
            
            .main-header nav ul li a {
                padding: 6px 12px;
                font-size: 14px;
            }
        }
        
        @media (max-width: 480px) {
            .message {
                max-width: 95%;
            }
            
            .message-avatar {
                width: 32px;
                height: 32px;
            }
            
            .message-content {
                padding: 8px 10px;
            }
            
            .message-text {
                font-size: 13px;
            }
            
            .message-time {
                font-size: 10px;
            }
            
            .emoji-button {
                width: 36px;
                height: 36px;
                margin-right: 6px;
            }
            
            .chat-input input {
                padding: 8px 12px;
            }
            
            .chat-input button {
                padding: 8px 12px;
                margin-left: 6px;
            }
        }
        
        /* 添加背景图片和覆盖层样式 */
        body.has-bg-image {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            position: relative;
        }
        
        .bg-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: -1;
        }
        
        body.has-bg-image .main-header,
        body.has-bg-image .main-footer {
            background-color: rgba(26, 31, 37, 0.9);
        }
    </style>
</head>
<body>
    <!-- 背景覆盖层 -->
    <div class="bg-overlay" id="bgOverlay"></div>
    
    <header class="main-header">
        <div class="container">
            <h1>聊天室</h1>
            <nav>
                <ul>
                    <li><a href="/">首页</a></li>
                    <li><a href="/weblinks">网站导航</a></li>
                    <li><a href="/danmaku-display">弹幕墙</a></li>
                    <li><a href="/chat-room" class="active">聊天室</a></li>
                    <li><a href="/ai-assistant">AI助手</a></li>
                    <li><a href="/dashboard" th:if="${#authorization.expression('isAuthenticated()')}">控制台</a></li>
                    <li><a href="/login" th:if="${#authorization.expression('!isAuthenticated()')}">登录</a></li>
                    <li><a href="/register" th:if="${#authorization.expression('!isAuthenticated()')}">注册</a></li>
                    <li><a href="/logout" th:if="${#authorization.expression('isAuthenticated()')}">退出</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="container">
        <div th:if="${#authorization.expression('isAuthenticated()')}">
            <div class="chat-room-container">
                <div class="users-panel">
                    <div class="users-header">
                        <h3>在线用户 (<span id="onlineCount">0</span>)</h3>
                    </div>
                    <div class="users-list" id="usersList">
                        <!-- 用户列表会通过JavaScript动态生成 -->
                    </div>
                </div>
                <div class="chat-panel">
                    <div class="chat-header">
                        <h2 class="chat-title">公共聊天室</h2>
                        <span id="connectionStatus">连接中...</span>
                    </div>
                    <div class="chat-messages" id="messageContainer">
                        <!-- 消息会通过JavaScript动态生成 -->
                    </div>
                    <div class="chat-input">
                        <button class="emoji-button" id="emojiButton">😊</button>
                        <input type="text" id="messageInput" placeholder="输入消息..." autocomplete="off">
                        <button id="sendButton" disabled>发送</button>
                    </div>
                    <!-- 表情选择器面板 -->
                    <div class="emoji-picker" id="emojiPicker">
                        <div class="emoji-picker-header">
                            <span>选择表情</span>
                            <button class="emoji-close-button" id="closeEmojiPicker">×</button>
                        </div>
                        <div class="emoji-container">
                            <!-- 常用表情 -->
                            <span class="emoji-item">😊</span>
                            <span class="emoji-item">😂</span>
                            <span class="emoji-item">🤣</span>
                            <span class="emoji-item">😍</span>
                            <span class="emoji-item">🥰</span>
                            <span class="emoji-item">😘</span>
                            <span class="emoji-item">😚</span>
                            <span class="emoji-item">🙂</span>
                            <span class="emoji-item">🙃</span>
                            <span class="emoji-item">😉</span>
                            <span class="emoji-item">😇</span>
                            <span class="emoji-item">🤔</span>
                            <span class="emoji-item">🤩</span>
                            <span class="emoji-item">😎</span>
                            <span class="emoji-item">🥳</span>
                            <span class="emoji-item">😒</span>
                            <span class="emoji-item">😞</span>
                            <span class="emoji-item">😔</span>
                            <span class="emoji-item">😢</span>
                            <span class="emoji-item">😭</span>
                            <span class="emoji-item">😡</span>
                            <span class="emoji-item">🥺</span>
                            <span class="emoji-item">❤️</span>
                            <span class="emoji-item">💔</span>
                            <span class="emoji-item">👍</span>
                            <span class="emoji-item">👋</span>
                            <span class="emoji-item">🙏</span>
                            <span class="emoji-item">💪</span>
                            <span class="emoji-item">🎉</span>
                            <span class="emoji-item">🌹</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div th:unless="${#authorization.expression('isAuthenticated()')}" class="login-reminder">
            <h2>需要登录</h2>
            <p>您需要登录才能使用聊天室功能。</p>
            <a href="/login" class="btn">登录</a>
            <a href="/register" class="btn btn-secondary">注册</a>
        </div>
    </main>

    <footer class="main-footer">
        <div class="container">
            <p>&copy; 2025 文档管理系统. 保留所有权利.</p>
        </div>
    </footer>

    <script src="/js/chat.js"></script>
    <script th:inline="javascript">
        // 获取当前用户信息
        const currentUser = /*[[${user}]]*/ null;
        
        // 获取聊天室背景设置
        const chatRoomBackground = /*[[${chatRoomBackground}]]*/ '';
        const chatRoomBackgroundOpacity = /*[[${chatRoomBackgroundOpacity}]]*/ '0.5';
        
        // 用户登录状态检查
        const isAuthenticated = /*[[${isAuthenticated}]]*/ false;
        console.log("用户登录状态: " + (isAuthenticated ? "已登录" : "未登录"));
        
        // 初始化聊天室
        document.addEventListener('DOMContentLoaded', function() {
            // 初始化背景
            window.chatRoom.initializeBackground(chatRoomBackground, chatRoomBackgroundOpacity);
            
            // 如果用户已登录，初始化聊天功能
            if (isAuthenticated && currentUser) {
                window.chatRoom.initializeChat(currentUser);
            } else {
                console.log("用户未登录，不初始化聊天功能");
            }
        });
    </script>
</body>
</html> 